<template>
     <div style="margin-left: 20px;">
          <div class="form-field">
            <template>
              <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
              @select="handleSelectionChange"> 
              >
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="date" label="编码">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="Gversion" label="网关版本">
                </el-table-column>
                <el-table-column prop="Fversion" label="固件版本 ">
                </el-table-column>
                <el-table-column prop="Ipaddress" label="IP地址 ">
                </el-table-column>
                <el-table-column prop="State" label="运行状态 ">
                </el-table-column>
                <el-table-column prop="illustrate" label="配置情况说明 ">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
    </template>
    <script>
    export default{
      data(){
        return{
          tableData: [{
        id:1,
        date: "001",
        name: "网关1",
        Gversion: "192.168.0.1",
        Fversion: "monservice",
        Ipaddress: "1.0.1",
        State: "正常",
        illustrate: "一切正常",
      }, {
        id:2,
        date: "002",
        name: "网关2",
        Gversion: "192.168.0.2",
        Fversion: "monservice",
        Ipaddress: "1.0.1",
        State: "正常",
        illustrate: "一切正常",
      }, {
        id:3,
        date: "003",
        name: "网关3",
        Gversion: "192.168.0.3",
        Fversion: "monservice",
        Ipaddress: "1.0.1",
        State: "正常",
        illustrate: "一切正常",
      }, {
        id:4,
        date: "004",
        name: "网关4",
        Gversion: "192.168.0.4",
        Fversion: "monservice",
        Ipaddress: "1.0.1",
        State: "正常",
        illustrate: "一切正常",
      },]
        }
      }
    }
  </script>
    <style scoped></style><style scoped>
    .el-tabs__nav-wrap::after {
      width: auto;
    }
    
    .flex1 {
      display: flex;
    
      justify-content: space-between;
    
    }
    
    .flex2 {
      display: flex;
      justify-content: left;
    
    }
    
    .settingbutton {
      padding: 0px 0px;
      border: 0px solid;
      margin-left: 5px;
    }
    
    ::v-deep .el-table tr {
      background-color: #FFF;
      height: 85px;
    }
    
    ::v-deep .el-pagination {
      padding: 0px 5px;
    }
    
    ::v-deep .el-select {
      margin-right: 10px;
    }
    </style>